<template>
  <div>
    <!-- 头部内容 -->
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right: 15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item @click="Cpassword">修改密码</el-dropdown-item>
          <el-dropdown-item @click="logout">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
      <span>王小名</span>
    </el-header>
    <el-container style="height:650px; border: 1px solid #eee;">
      <left-nav></left-nav>
      <el-container style="flex-direction:column">
        <!-- tab标签 -->
        <div class="template-tabs">
          <el-tabs
            v-model="activeIndex"
            type="border-card"
            closable
            @tab-click="tabClick"
            @tab-remove="tabRemove"
          >
            <el-tab-pane
              v-for="item in options"
              :label="item.name"
              :name="item.route"
              :key="item.name"
            ></el-tab-pane>
          </el-tabs>
        </div>
        <!-- 点击左边菜单栏页面，右边内容进行变化 -->
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import LeftNav from "./components/LeftNav";

export default {
  name: "TeacherHome",
  components: {
    LeftNav,
   
  },
  methods: {
    // tab切换时，动态的切换路由
    tabClick(tab) {
      let path = this.activeIndex;
      this.$router.push({ path: path });
      this.$store.commit("set_role", "nopass");
    },
    //移除标签
    tabRemove(targetName) {
      this.$store.commit("set_role", "nopass");
      // let tabs = this.editableTabs;
      this.$store.commit("delete_tabs", targetName);
      // 如果激活的关闭的tab就是激活的tab
      if (this.activeIndex === targetName) {
        // 设置当前激活的路由
        if (this.options && this.options.length >= 1) {
          this.$store.commit(
            "set_active_index",
            this.options[this.options.length - 1].route
          );
          this.$router.push({ path: this.activeIndex });
        }
        //如果tag标签全部删除的话，跳转到student页面
        else {
          this.$router.push({ path: "/exam" });
        }
      }
    },

    //退出登录
    logout(){
      window.sessionStorage.clear();
      this.$router.push('/login');
    }
  },
  watch: {
    $route(to) {
      let role = this.$store.state.role;
      let showName = this.$store.getters.getShowName;
      let flag = false; //判断是否页面中是否已经存在该路由下的tab页
      //options记录当前页面中已存在的tab页
      for (let option of this.options) {
        //用名称匹配，如果存在即将对应的tab页设置为active显示桌面前端
        if (option.name === showName) {
          flag = true;
          this.$store.commit("set_active_index", to.path);
          break;
        }
      }
      //如果不存在，则新增tab页，再将新增的tab页设置为active显示在桌面前端
      // if(role!='nopass'){}
      if (role == "pass") {
        if (!flag) {
          this.$store.commit("add_tabs", { route: to.path, name: showName });
          this.$store.commit("set_active_index", to.path);
        }
      }
    }
  },
  computed: {
    options() {
      return this.$store.state.options;
    },
    //动态设置及获取当前激活的tab页
    activeIndex: {
      get() {
        return this.$store.state.activeIndex;
      },
      set(val) {
        this.$store.commit("set_active_index", val);
      }
    }
  }
};
</script>
<style lang="stylus" scoped>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 60px;
}

.el-aside {
  color: #333;
}

.template-tabs {
  height: 50px;
}
</style>>
 